<mat-card>Add employee</mat-card>
<div class="content" [formGroup]="form">

  <mat-form-field appearance="legacy">
    <mat-label>First name</mat-label>
    <input matInput placeholder="firstName" name="firstName" formControlName="firstName" required>
  </mat-form-field>

  <mat-form-field appearance="legacy">
    <mat-label>Last name</mat-label>
    <input matInput placeholder="lastName" name="lastName" formControlName="lastName" required>
  </mat-form-field>

  <mat-form-field appearance="legacy">
    <mat-label>Email</mat-label>
    <input matInput placeholder="email" formControlName="email" name="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Role</mat-label>
    <mat-select placeholder="role" name="role" formControlName="role" required>
      <mat-option *ngFor="let r of roles" [value]="r">
        {{r}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field appearance="legacy">
    <mat-label>Account number</mat-label>
    <input matInput placeholder="accountNumber" formControlName="accountNumber"
           name="accountNumber" required>
    <mat-hint>26 digits</mat-hint>
  </mat-form-field>

  <mat-form-field appearance="legacy">
    <mat-label>Days off per year</mat-label>
    <input matInput placeholder="daysOffPerYear" formControlName="daysOffPerYear" name="daysOffPerYear"
           required>
    <mat-hint>0 - 26</mat-hint>
  </mat-form-field>

  <mat-form-field appearance="legacy">
    <mat-label>Salary</mat-label>
    <input matInput placeholder="salary" formControlName="salary" name="salary" required>
  </mat-form-field>

  <button mat-raised-button (click)="submitForm()" [disabled]="form.invalid">Add employee</button>
</div>
